<template>
  <div class="theme-active-text-color content">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: 'newsList' }">列表</el-breadcrumb-item>
      <el-breadcrumb-item>文章详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="article_box">
      <div class="title">{{article.title}}</div>
      <div class="article" v-html="article.content"></div>
    </div>
    
  </div>
</template>

<script>
import { articleDetailApi } from "@/api"
export default {
  name: "",
  components: {},
  data() {
    return {
      article:{},
      id:this.$route.query.id
    };
  },
  created() {
    this.getArticleDetail()
  },
  methods: {
     async getArticleDetail(){
      let that = this
      let res = await articleDetailApi({
        id:that.id
      })
      if(res){
        console.log(res.data[0]);
        this.article = res.data[0]
      }
    },

    toDetail(id){
      this.$router.push({
        path:"articleDetail",
        query:{
          id:id
        }
      })
    }
     
  }
};
</script>
<style lang="less" scoped>
.content{
  width: 100%;
  height: 100%;
  padding:20px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  flex-direction: column;

  .article_box{
    width: 80%;
    margin: 30px auto;
    .title{
    font-size: .3rem;
    font-weight: 600;
    color: rgb(54, 54, 54);
    text-align: center;
    margin-bottom: 50px;
    }

    .article{
      font-size: .18rem;
      color: rgb(61, 61, 61);
    }
  }

 

 

}

</style>